<template>
    <view :class="themeName" class="tabbar" v-if="isShow">
        <view
            class="uni-tabbar"
            :style="{
                'background-color': styles.bg_color
            }"
        >
            <view class="uni-tabbar__border">
			</view>
			<view class="uni-tabbar__body">
				<view
				    class="uni-tabbar__item flex-col row-center col-center"
				    v-for="(item, index) in contentData"
				    :key="index"
				    @tap="changeTab(item.link)"
				>
				  
					<u-badge
						v-if="showBadge(item.link.path)"
						:count="cartNum"
						:offset="[10, 54]"
						v-show="isLogin"
					/>
				 <view class="uni-tabbar__icon" v-if="content.style != 3">
					 
					  <image
						  class="icon-image"
						  v-if="item.link.path != currentPath"
						  :src="_getImageUri(item.icon)"
					  >
					  </image>
					  <image class="icon-image" v-else :src="_getImageUri(item.select_icon)"></image>
				  </view>
				    <view
				        class="uni-tabbar__label"
				        v-if="content.style != 2"
				        :class="{ 'uni-tabbar__label-active': item.link.path == currentPath }"
				        :style="[itemStyle(item.link.path)]"
				    >
				       <text class="uni-tabbar__label-name" :class="{
						   'uni-tabbar__label-name-active': item.link.path == currentPath
					   }"> {{ item.name }}</text>
				    </view>
				</view>
			</view>
        </view>
    </view>
</template>

<script >

import { mapGetters } from 'vuex'
function  _getImageUri (url) {
	const oss_domain =  ''
	return oss_domain + url
}
export default {
	name: "TabBar",
    props: {},
    data() {
        return {
            pagePath: '',
            basePages: [
                '/pages/index/index',
                '/pages/category/category',
                '/pages/red-envelope-video/index',
                '/pages/user/user'
            ]
        }
    },
    methods: {
        changeTab(link) {
			// @todo 红包视频的path后台数据返回与实际不相符合, 后台暂时没时间改，这里前端先处理下
			let { path, index, name } = link
			if (index == 31 && name === '视频红包' ) {
				path = '/pages/red-envelope-video/index'
			}
            if (this.basePages.includes(path)) {
                uni.reLaunch({
                    url: path
                })
            } else {
                this.$Router.replaceAll({
                    path: path,
                    query: link.params
                })
            }
        },
		_getImageUri (url) {
			const oss_domain =  this.$store.state.app.config.oss_domain || ''
			const retVal = oss_domain + url
			return retVal
		}
       
    },
    computed: {
        ...mapGetters(['isLogin']),

        content() {
            const { tabbar } = this.$store.getters
            return tabbar.content || {}
        },
		contentData() {
			const vm = this
			if (this.content && this.content.data) {
				const data = this.content.data
				return data.map(item => {
					return {
						...item,
					}
				})
			}
			return []
		},
        styles() {
            const { tabbar } = this.$store.getters
            return tabbar.styles || {}
        },
        itemStyle() {
            return (path) => {
                const { color_type } = this.content
                const { select_color, color } = this.styles
                if (color_type == 1) return
                if (path == this.currentPath) {
                    return {
                        color: select_color
                    }
                }
                return {
                    color
                }
            }
        },
        currentPath() {
			return '/pages/red-envelope-video/index'
			// return 'https://down.duanju.xin/pg'
        },
        isShow() {
			return true
            return (
                this.content.data &&
                this.content.data.some((item) => item.link.path == this.currentPath)
            )
        },
        cartNum() {
            return this.$store.state.cart.cartNum
        },
        showBadge() {
            return (path) => this.cartNum && path === '/pages/shop_cart/shop_cart'
        }
    },
    created() {
        this.$store.dispatch('getCartNum')
    },
	mounted() {
	
	}
}
</script>

<style >
.uni-tabbar {
	display: flex;
	flex-direction: column;
	flex: 1;
	
    
}

.uni-tabbar__border {
	width: 750rpx;
	height: 1px;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	background-color: rgba(0, 0, 0, 0.33);
}

.uni-tabbar__body {
	display: flex;
	flex-direction: row;
	width: 750rpx;
	height: 100rpx;
}
.uni-tabbar__item {
	position: relative;
	flex: 1;
	height: 100rpx;
	margin: 0 10rpx;
}

.uni-tabbar__icon {
	height: 48rpx;
}
.icon-image {
	width: 44rpx;
	height: 44rpx;
}

.tabbar-placeholder {
	box-sizing: content-box;
    width: 750rpx;
    height: 100rpx;
}
.uni-tabbar__label-name {
	font-size: 24rpx;
	color: #666666;
}
.uni-tabbar__label-name-active {
	color: #ff8200;
}

</style>
